<?php echo $header; ?>
<?php if ($error_warning) { ?>
  <div class="warning"><?php echo $error_warning; ?></div>
<?php } ?>
<?php if ($error_product_limit) { ?>
  <div class="warning"><?php echo $error_product_limit; ?></div>
<?php } ?>
<div class="box">
  <div class="left"></div>
  <div class="right"></div>
  <div class="heading">
    <h1 style="background-image: url('view/image/module.png');"><?php echo $heading_title; ?></h1>
    <div class="buttons"><a onclick="$('#form').submit();" class="button"><span><?php echo $button_save; ?></span></a><a onclick="location = '<?php echo $cancel; ?>';" class="button"><span><?php echo $button_cancel; ?></span></a></div>
  </div>
  <div class="content">
    <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
      <table class="form">
        <tr>
          <td><?php echo $entry_limit; ?></td>
          <td><input type="text" id="product_limit" name="product_limit" value="<?php echo $product_limit; ?>" size="1" disabled="disabled" /></td>
        </tr>
        <tr style="display:none;">
          <td><?php echo $entry_position; ?></td>
          <td><select name="product_position">
              <?php foreach ($positions as $position) { ?>
              <?php if ($product_position == $position['position']) { ?>
              <option value="<?php echo $position['position']; ?>" selected="selected"><?php echo $position['title']; ?></option>
              <?php } else { ?>
              <option value="<?php echo $position['position']; ?>"><?php echo $position['title']; ?></option>
              <?php } ?>
              <?php } ?>
            </select></td>
        </tr>
        <tr style="display: none;">
          <td><?php echo $entry_status; ?></td>
          <td><select name="product_status">
              <?php if ($product_status) { ?>
              <option value="1" selected="selected"><?php echo $text_enabled; ?></option>
              <option value="0"><?php echo $text_disabled; ?></option>
              <?php } else { ?>
              <option value="1"><?php echo $text_enabled; ?></option>
              <option value="0" selected="selected"><?php echo $text_disabled; ?></option>
              <?php } ?>
            </select></td>
        </tr>
        <tr>
          <td><?php echo $entry_sort_order; ?></td>
          <td><input type="text" name="product_sort_order" value="<?php echo $product_sort_order; ?>" size="1" /></td>
        </tr>
        <tr>
            <td><?php echo $entry_product; ?></td>
            <td>
                <table>
                  <tr>
                    <td style="padding: 0;" colspan="3"><select id="category" style="margin-bottom: 5px;" onchange="getProducts();">
                      <?php foreach ($categories as $category) { ?>
                      <option value="<?php echo $category['category_id']; ?>"><?php echo $category['name']; ?></option>
                      <?php } ?>
                    </select></td>
                  </tr>
                  <tr>
                    <td style="padding: 0;"><select multiple="multiple" id="product" size="10" style="width: 550px;"></select></td>
                    <td style="vertical-align: middle;"><input type="button" value="Add product" onclick="addFeatured();" /></td>
                  </tr>
                </table>               
            </td>
        </tr> 
        <tr>
            <table class="list" id="product_left">
                <thead>
                    <tr>                      
                        <td class="left">Name</td>
                        <td class="right">Price</td>
                        <td class="left">Image</td>                  
                        <td class="left">Remove</td>
                    </tr>
                </thead>
                <tbody>
                    <?php $i = 0; ?>
                    <?php if($product_left){ ?>
                        <?php foreach ($product_left as $pl) { ?>
                            <tr id="product_left<?php echo $i; ?>">
                                <td id="product_id<?php echo $pl['product_id']; ?>" class="left">
                                    <input type="hidden" name="product_left[<?php echo $i; ?>][product_id]" value="<?php echo $pl['product_id']; ?>" />
                                    <input type="hidden" name="product_left[<?php echo $i; ?>][name]" value="<?php echo $pl['name']; ?>" size="100" />
                                    <p><?php echo $pl['name']; ?></p>
                                </td>
                                <td class="right">
                                    <input type="hidden" class="right" name="product_left[<?php echo $i; ?>][price]" value="<?php echo $pl['price']; ?>" size="5" />
                                    <p><?php echo $pl['price']; ?></p>
                                </td>
                                <td class="left">
                                    <input type="hidden" id="image<?php echo $i; ?>" name="product_left[<?php echo $i; ?>][image]" value="<?php echo $pl['image']; ?>" />
                                    <img src="<?php echo $pl['preview']; ?>" alt="" id="preview<?php echo $i; ?>" class="image" /> <!-- onclick="image_upload('image<?php echo $i; ?>', 'preview<?php echo $i; ?>');" / -->
                                </td>
                                <td class="left">
                                    <a onclick="removeFeatured(<?php echo $i; ?>);" class="button"><span>Remove</span></a>
                                </td>
                            </tr>
                            <?php $i++; ?>
                        <?php } ?> 
                    <?php }else{ ?>
                        <tr><td colspan="4"></td></tr>
                    <?php } ?>
                </tbody>                
            </table>    
        </tr>     
      </table>
    </form>
  </div>
</div>
<script type="text/javascript"><!--
var last_row = <?php echo $i; ?>;
function addFeatured() {         
    if($('#product_left tr[id^=\'product_left\']').length >= $('#product_limit').val()){
        //alert("You can only add 3 products.");
        return;
    }
    
    
    $('#product :selected').each(function(){ 
        if($('#product_id' + $(this).attr('value')).length <= 0){   
            var html = '';
            html += '<tr id="product_left' + last_row + '">';
            html += '   <td id="product_id' + $(this).attr('value') + '"' + ' class="left">';
            html += '       <input type="hidden" name="product_left[' + last_row + '][product_id]" value="' + $(this).attr('value') + '" />';
            html += '       <input type="text" name="product_left[' + last_row + '][name]" value="' + $(this).html() + '" size="100" />';
            html += '   </td>';
            html += '   <td class="right"><input type="text" class="right" name="product_left[' + last_row + '][price]" value="' + $(this).attr('alt') + '" size="5" /></td>';
            html += '   <td class="left">' ;
            html += '       <input type="hidden" id="image' + last_row + '" name="product_left[' + last_row + '][image]" value="' + $(this).attr('shape') + '" />';
            html += '       <img src="' + $(this).attr('rel') + '" alt="" id="preview' + last_row + '" class="image" onclick="image_upload(\'image' + last_row + '\', \'preview' + last_row + '\');" />';
            html += '   </td>';
            html += '   <td class="left"><a onclick="removeFeatured(' + last_row + ');" class="button"><span>Remove</span></a></td>';
            html += '</tr>';                    
        
            if($('#product_left tr[id^=\'product_left\']').length > 0){
                $('#product_left tbody').append(html);
            }
            else{
                $('#product_left tbody').html(html);
            }
            
            last_row++;
        }
        else{
            alert("This product has been added.");
        }
    });
}

function removeFeatured(row) {
    $('#product_left' + row).remove();
}

function getProducts() {
    $('#product option').remove();
    
    $.ajax({
        url: 'index.php?route=module/product/category&token=<?php echo $token; ?>&category_id=' + $('#category').attr('value'),
        dataType: 'json',
        success: function(data) {
            for (i = 0; i < data.length; i++) {
                 $('#product').append('<option value="' + data[i]['product_id'] + '" alt="' + data[i]['price'] + '" shape="' + data[i]['image'] + '" rel="' + data[i]['preview'] + '">' + data[i]['name'] + '</option>');
            }
        }
    });
}

function getFeatured() {
    $('#featured option').remove();
    
    $.ajax({
        url: 'index.php?route=module/product/product&token=<?php echo $token; ?>',
        type: 'POST',
        dataType: 'json',
        data: $('#product_left input'),
        success: function(data) {
            $('#product_left input').remove();
            
            for (i = 0; i < data.length; i++) {
                 $('#featured').append('<option value="' + data[i]['product_id'] + '" alt="' + data[i]['price'] + '" shape="' + data[i]['image'] + '" rel="' + data[i]['preview'] + '">' + data[i]['name'] + '</option>');
                
                //$('#product_left').append('<input type="hidden" name="product_left[]" value="' + data[i]['product_id'] + '" />');
            } 
        }
    });
}

getProducts();
//getFeatured();
//--></script>

<script type="text/javascript" src="view/javascript/jquery/ui/ui.draggable.js"></script>
<script type="text/javascript" src="view/javascript/jquery/ui/ui.resizable.js"></script>
<script type="text/javascript" src="view/javascript/jquery/ui/ui.dialog.js"></script>
<script type="text/javascript" src="view/javascript/jquery/ui/external/bgiframe/jquery.bgiframe.js"></script>
<script type="text/javascript"><!--
    function image_upload(field, preview) {
        $('#dialog').remove();
        
        $('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="index.php?route=common/filemanager&token=<?php echo $token; ?>&field=' + encodeURIComponent(field) + '" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');
        
        $('#dialog').dialog({
            title: '<?php echo $text_image_manager; ?>',
            close: function (event, ui) {
                if ($('#' + field).attr('value')) {
                    $.ajax({
                        url: 'index.php?route=common/filemanager/image&token=<?php echo $token; ?>',
                        type: 'POST',
                        data: 'image=' + encodeURIComponent($('#' + field).attr('value')),
                        dataType: 'text',
                        success: function(data) {
                            $('#' + preview).replaceWith('<img src="' + data + '" alt="" id="' + preview + '" class="image" onclick="image_upload(\'' + field + '\', \'' + preview + '\');" />');
                            
                            if(data.indexOf('no_image') > 0){                             
                                $('#' + field).attr('value', '');
                            }
                        }                     
                    });
                }
            },    
            bgiframe: false,
            width: 700,
            height: 400,
            resizable: false,
            modal: false
        });
    };
//--></script>  

<?php echo $footer; ?>